<template>
  <view class="goods-search">
    <!-- 搜索框 -->
    <view class="goods-search-header">
      <u-search class="search"
                height="61"
                shape="round"
                v-model="query"
                placeholder="输入商品名"
                :show-action="false"></u-search>
      <u-button class="button"
                type="error"
                size="mini"
                @click="getSearchList">搜索</u-button>
    </view>
    <view class="goods-search-content">
      <navigator v-for="goods in searchList"
                 :key="goods.goods_id"
                 :url="'/pages/goods_detail/goods_detail?goods_id='+goods.goods_id">
        <view class="goods-search-list">{{goods.goods_name}}</view>
      </navigator>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchList: [],
      query: '',
    }
  },
  methods: {
    async getSearchList() {
      if (!this.query) {
        uni.showToast({
          title: '没有输入关键字',
          icon: 'none',
        })
        return
      }
      this.searchList = await this.$u.get('/goods/qsearch', { query: this.query })
    },
  },
}
</script>

<style lang="scss" scoped>
.goods-search {
  padding-top: 100rpx;
  .goods-search-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    display: flex;
    padding: 15rpx 18rpx;
    align-items: center;
    border-bottom: 1px solid #ccc;
    .search {
      flex: 4;
    }
    .button {
      margin-left: 15rpx;
    }
  }
  .goods-search-content {
    padding: 0 20rpx;
    navigator {
      padding: 10rpx 0;
      border-bottom: 1px solid #ccc;
    }
  }
}
</style>